<template>
	<view>
		<view class="top">
			<image src="/static/yiduoduoicon.png" class="img" /> 
		</view>
		<view class="shu">
		<view class="title">{{title}}</view>
		<view class="num">￥:<input class="in_num" type="number" name="in_num" @input="log" placeholder="请输入金额"></view>
		<view v-if="type==1">
<!-- 验证码 -->
		
			<view class="cash_in_yzm"><view class="yzm_text">验证码</view><input class="yzm" type="text" name="yzm" @input="codenum" placeholder="手机验证码" />
			<view v-if="show_yzm">
				<view class="yzm_btn" @tap="yzm">获取验证码</view>
			</view>
			<view v-else>
				<view class="yzm_btn2">剩余{{seconde}}s</view>
			</view>
			</view>
			<view style="width: 100%;text-align: center;color:#808080 ;">易宝支付请获取验证码验证。</view>
			
		<!-- 验证码结束	 -->
		<view class="btn" @tap="btn1">确定</view>
		</view ><view v-else>
		<view class="btn" @tap="btn2">确定</view>
		</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:'',
				title:'',
				type:'',
				phone:'',
				show_yzm:true,
				seconde:'60',
				code_num:'',
				myphone:'',
			}
		},
		onLoad(option) {
			
			console.log("131",option.id)
			let num=option.id.substring(11)
			this.type=num
			this.phone=option.id.substring(0,11)
			console.log("1312",num)
			console.log("1313",this.phone)
			if(num ==1){
				this.title="请输入付款金额"
			}else{
				this.title="请输入收款金额"
			}
			// 用户信息请求
			uni.request({
				url:'http://tuiguang.yiyunoto.com/api/member/tixianmoney',
				header:{authtoken:this.$store.state.token},
				success:(res)=>{
					console.log("11请求成功",res)
					this.myphone=res.data.data.phone
				},
				fail:(res)=>{
					console.log("请求失败",res)
				}
			})
			
		},
		methods: {
			log:function(e){
				console.log(e.detail.value)
				this.num=e.detail.value
			},
			codenum(e){
				console.log(e.detail.value)
				this.code_num=e.detail.value
			},
			yzm:function(){
				console.log("获取验证码",this.tel)
					uni.request({
							url: 'http://tuiguang.yiyunoto.com/api/login/smsSend',
							method:'POST',
							header:{authtoken:this.$store.state.token},
							data:{
								phone:this.myphone,
							},
								success: (res) => {
									this.$api.msg(res.data.msg);
									if(res.data.msg=="短信验证码发送成功"){
									this.show_yzm=false,
									setInterval(()=>{
										--this.seconde
									},1000)
									setTimeout(()=>{
										this.show_yzm=true,
										this.seconde=60},
										60000
									)}
							console.log("ya",res.data.msg)							// console.log(res.data.data);
							}
						});
				},
			//付款
			btn1:function(){
				uni.request({
					url: 'http://tuiguang.yiyunoto.com/api/member/payment',
					header: { authtoken: this.$store.state.token },
					data:{
						passcard:this.num,
						phone:this.phone,
						phone1:this.myphone,
						code:this.code_num,
					},
					success: res => {
						console.log('qiquan请求成功', res);
						this.$api.msg(res.data.msg);
						
					},   
					fail: res => {
						console.log('请求失败', res);
					}
				})
			},
			//收款
			btn2:function(){
				uni.request({
					url: 'http://tuiguang.yiyunoto.com/api/member/receivables',
					header: { authtoken: this.$store.state.token },
					data:{
						passcard:this.num,
						phone:this.phone
					},
					success: res => {
						console.log('qiquan请求成功2', res);
						this.$api.msg(res.data.msg);
					},
					fail: res => {
						console.log('请求失败', res);
					}
				})
			}
		}
	}
</script>

<style>
	.top{
		width: 200upx;
		height: 200upx;
		margin: 10upx auto;
	}
	.img{
		text-align: center;
		width: 100%;
		height: 100%;
		
	}
	.shu{
		width: 100%;
		height: 90vh;
		border-radius: 100upx 100upx 0upx 0upx;
		background:#ededed;
	}
	.title{
		width: 100%;
		height: 50upx;
		padding-top: 50upx;
		padding-left: 50upx;
		box-sizing: border-box;
	}
	.num{
		width: 80%;
		height: 50upx;
		margin-left: 10%;
		margin-top: 80upx;
		box-sizing: border-box;
		
	}
	.in_num{
		margin-left: 30upx;
		width:70%;
		border-bottom: 1upx solid #000000;
	}
	// 验证码
	.cash_in_yzm{
			width: 100%;
			height: 100upx;
			padding: 30upx 30upx;
			margin-top: 180upx;
			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
			box-sizing: border-box;
			background: #FFFFFF;
		}
		.yzm_text{
			width:25%;
			float: left;
			
		}
		.yzm {
			width:50%;
			float: left;
		}
	
		.yzm_btn {
			width: 25%;
			font-size: 26upx;
			text-align: right;
			float: right;
			color: blue;
	
		}
		.yzm_btn2{
			width:25%;
			font-size: 26upx;
			text-align: right;
			float: right;
			color: #DBDADA;
		}
	.btn{
		width: 50%;
		height: 100upx;
		margin: 300upx auto;
		padding-top: 25upx;
		color: #FFFFFF;
		font-size: 60upx;
		text-align: center;
		background: #62a8ff;
		border-radius: 30upx;
	}
</style>
